<template>
	<!--
	    author: 李文昊
	    description: uniapp不能直接传数组对象，如果要传可以使用JSON方法
	-->
	<view class="advancePayment-container">
		<con-advance-pay-table-title content="会议室预约"></con-advance-pay-table-title>
		<con-advance-pay-small-title content="基本资料" state="未支付"></con-advance-pay-small-title>
		<view class="item-table">
			<con-advance-pay-view-item name="申请人" value="李阳"></con-advance-pay-view-item>
			<con-advance-pay-view-item name="手机号码" value="13565137716"></con-advance-pay-view-item>
			<con-advance-pay-view-item name="租户名称" value="福建海峡科技有限公司"></con-advance-pay-view-item>
			<con-advance-pay-view-item name="楼盘" value="福建八闽大厦"></con-advance-pay-view-item>
			<con-advance-pay-input-item typeMsg="联系人" :isEmpty="true"></con-advance-pay-input-item>
			<con-advance-pay-input-item typeMsg="手机号码" :isEmpty="true"></con-advance-pay-input-item>
		</view>
		<view v-for="(n1,index1) in number1" :key="'c'+index1">
			<view class="item-table" style="margin-bottom: 24rpx;">
				<view class="picker-block">
					<view class="picker-note">预约日期</view>
					<view class="row-value">
						<picker mode="date" style="width: 220rpx;" @change="changeStartDate($event,n1)">
							{{timeArr[index1].startDate}}
						</picker>
					</view>
				</view>
			</view>
		</view>
		<view class="item-table" :style="{'margin-bottom': '30rpx'}">
			<con-advance-pay-view-item name="预约位置" value="1楼101" :isLast="true"></con-advance-pay-view-item>
		</view>
		<view v-for="(n,index) in number" :key="index">
			<view class="item-table">
				<view class="picker-block" :style="{'border-bottom':'none'}">
					<view class="picker-note">起始时间</view>
					<view class="row-value">
						<picker mode="time" :value="timeArr[index].startTime" @change="changeStartTime($event,n)">
							{{timeArr[index].startTime}}-
						</picker>
						<picker mode="time" :value="timeArr[index].endTime" @change="changeEndTime($event,n)">
							{{timeArr[index].endTime}}
						</picker>
					</view>
				</view>
			</view>
		</view>
		<view class="item-table">
			<view class="picker-block">
				<view class="picker-monthly-free">每月免费10小时，已用5小时，剩余5小时</view>
				<view class="row-val"></view>
			</view>
		</view>
		<view class="color-FFF">
			<con-app-details-check @checkArgs="checkArgs" :checkArg="checkArg"></con-app-details-check>
		</view>
		<view class="total-view"><text class="total-text total-price">￥{{520}}</text><text class="total-text">合计:</text>
		</view>
		<view>
			<con-advance-pay-small-title content="支付方式"></con-advance-pay-small-title>
			<view style="display: flex;justify-content: center;">
				<radio-group class="payway-style">
					<label style="display: flex;">
						<radio class="first-radio" color="#FF0000" value="alipay"></radio>
						<view class="payway-choice">
							<image src="../../../static/alipay-logo.svg" class="payway-logo"></image>
							<view style="font-size: 30rpx;">支付宝支付</view>
						</view>
					</label>
					<label style="display: flex;">
						<radio class="second-radio" color="#FF0000" value="wechat"></radio>
						<view class="payway-choice">
							<image src="../../../static/wechat-logo.svg" class="payway-logo"></image>
							<view style="font-size: 30rpx;">微信支付</view>
						</view>
					</label>
				</radio-group>
			</view>
		</view>
		<view>
			<con-advance-pay-small-title content="开票信息"></con-advance-pay-small-title>
			<radio-group class="invoice-group" @change="chooseInvoiceType">
				<label class="invoice-choice">
					<radio value="person"></radio>
					<view>个人</view>
				</label>
				<label class="invoice-choice">
					<radio value="company"></radio>
					<view>单位</view>
				</label>
			</radio-group>
			<view class="item-table" v-if="companyFlag">
				<con-advance-pay-input-item typeMsg="发票抬头" :isEmpty="true"></con-advance-pay-input-item>
				<con-advance-pay-input-item typeMsg="税号" :isEmpty="true"></con-advance-pay-input-item>
				<con-advance-pay-input-item typeMsg="开户银行" :isEmpty="true"></con-advance-pay-input-item>
				<con-advance-pay-input-item typeMsg="银行账号" :isEmpty="true"></con-advance-pay-input-item>
				<con-advance-pay-input-item typeMsg="企业地址" :isEmpty="true"></con-advance-pay-input-item>
				<con-advance-pay-input-item typeMsg="企业电话" :isEmpty="true" :isLast="true"></con-advance-pay-input-item>
			</view>
			<view class="item-table" v-if="personFlag">
				<con-advance-pay-input-item typeMsg="发票抬头" :isEmpty="true" :isLast="true"></con-advance-pay-input-item>
			</view>
		</view>
		<button class="confirm-button">确认</button>
		<view style="height: 200rpx;"></view>
	</view>
</template>

<script>
	export default {
		props: {
			paymentValue: String
		},
		data() {
			return {
				checkArg: "",
				number: 1,
				number1: 1,
				personFlag: false,
				companyFlag: false,
				timeRange: ['01点', '02点', '03点', '04点', '05点', '06点', '07点', '08点', '09点',
					'10点', '11点', '12点', '13点', '14点', '15点', '16点', '17点', '18点', '19点',
					'20点', '21点', '22点', '23点', '24点'
				],
				timeArr: [{
					'startDate': '1111-11-11',
					'endDate': '2222-22-22',
					'startTime': '11:30',
					'endTime': '22:30'
				}]
			}
		},
		methods: {
			checkArgs(value) {
				console.log(value)
			},
			changeStartDate(e, n) {
				this.timeArr[n - 1].startDate = e.detail.value

			},
			changeStartTime(e, n) {
				let time = e.detail.value + 1
				this.timeArr[n - 1].startTime = time + ':00'
			},
			changeEndTime(e, n) {
				this.timeArr[n - 1].endTime = e.detail.value
			},
			chooseInvoiceType(e) {
				if (e.detail.value === 'person') {
					this.personFlag = true
					this.companyFlag = false
				} else if (e.detail.value === 'company') {
					this.companyFlag = true
					this.personFlag = false
				}
			},
		},
		onReady() {
			let year = new Date().getFullYear()
			let month = new Date().getMonth() + 1
			let date = new Date().getDate()
			let hour = new Date().getHours() + 1
			month = month > 9 ? month : '0' + month
			date = date > 9 ? date : '0' + date
			hour = hour > 9 ? hour : '0' + hour
			let nowDate = year + '-' + month + '-' + date
			let nowTime = hour + ':00'
			let endTime = parseInt(hour) + 5 + ':00'
			this.timeArr[0].startDate = nowDate
			this.timeArr[0].endDate = nowDate
			this.timeArr[0].startTime = nowTime
			this.timeArr[0].endTime = endTime
		},
		onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
		       this.checkArg = option.checkItem
		}
	}
</script>

<style>
	.advancePayment-container {
		width: 100%;
		font-size: 28rpx;
		padding-bottom: 20rpx;
		background-color: #FFFFFF;
	}

	.select-tc {
		overflow: hidden;
		padding: 20rpx 50rpx;
		height: 50rpx;
		line-height: 50rpx;
	}

	.tc-details {
		float: left;
		margin-left: 56rpx;
	}

	.tc-G {
		float: right;
		margin-right: 50rpx;
		height: 50rpx;
		font-size: 0;
	}

	.payway-style {
		display: flex;
		flex-direction: column;
		width: 650rpx;
	}

	.invoice-choice {
		display: flex;
		margin-left: 50rpx;
	}

	.confirm-button {
		background-color: #007AFF;
		color: #FFFFFF;
		width: 650rpx;
		margin-top: 50rpx;
		border-radius: 50rpx;
	}

	.first-radio {
		height: 100rpx;
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		padding-left: 25rpx;
		border: solid 0rpx #C8C7CC;
		border-bottom: none;
		border-right: none;
	}

	.payway-choice {
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		border: solid 0rpx #C8C7CC;
		width: 600rpx;
		border-left: none;
	}

	.payway-logo {
		width: 50rpx;
		height: 50rpx;
		margin: 0 25rpx 0 25rpx;
	}

	.invoice-group {
		display: flex;
		align-items: center;
		height: 80rpx;
	}

	.second-radio {
		height: 100rpx;
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		padding-left: 25rpx;
		border: solid 0rpx #C8C7CC;
		border-right: none;
		width: 50rpx;
	}

	.total-view {
		font-size: 36rpx;
		font-weight: 500;
		padding-top: 20rpx;
		padding-bottom: 0;
		line-height: 1.5;
		margin-top: 10rpx;
		padding-left: 50rpx;
		padding-right: 50rpx;
		overflow: hidden;
	}

	.total-price {
		transform: scale(0.9);
		position: relative;
		top: 3rpx;
		font-weight: 700;
		color: red;
	}

	.total-text {
		float: right;
	}

	.tc-G image {
		width: 30rpx;
		height: 30rpx;
		display: inline-block;
		vertical-align: middle;
	}

	.item-table {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.picker-block {
		height: 100rpx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		border: solid 1rpx #666666;
	}

	.picker-note {
		width: 200rpx;
		margin-left: 50rpx;
		height: 100rpx;
		justify-content: center;
		display: flex;
		flex-direction: column;
	}

	.picker-monthly-free {
		width: 540rpx;
		margin-left: 50rpx;
		height: 100rpx;
		justify-content: center;
		display: flex;
		flex-direction: column;
	}

	.row-val {
		width: 60rpx;
		height: 100rpx;
		display: flex;
		align-items: center
	}

	.row-value {
		width: 400rpx;
		height: 100rpx;
		display: flex;
		align-items: center
	}

	.color-FFF {
		background-color: #FFFFFF;
	}

	.uni-title {
		font-size: 28rpx;
		font-weight: 500;
		padding: 20rpx 0;
		line-height: 1.5;
	}

	.uni-common-mt {
		margin-top: 10rpx;
	}

	.uni-common-pl {
		padding-left: 50rpx;
	}
</style>
